<template>
  <div class="good">
    <div v-for="(good, key1) in goods" :key="key1" class="good-b">
      <div class="title">{{good.region.title}}</div>
      <div class="goods-show" v-for="(item,one) in good.list" :key="one">
        <img :src="item.product.pic">
        <div class="r-body">
          <div class="top">{{item.product.title}}</div>
          <div class="des"><span v-for="des in item.product.detail" :key="des.name">{{des.value}}</span></div>
          <div class="t-right">
            <div class="price">{{item.product.price}}</div>
            <div class="num">x{{item.num}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      goods: {
        type: Array,
        default: () => []
      }
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl"
  .good
    margin 0 vw(15) vw(10)
    padding-top 1vw
    .good-b
      border-radius vw(5)
      overflow hidden
      background-color #fff
      .title
        font-size vw(14)
        color main-color
        height vw(30)
        line-height vw(30)
        border-bottom 1px solid #f7f7f7
        padding-left vw(10)
    .goods-show
      display: flex;
      padding: vw(10);
      img
        width: vw(80);
        height: vw(80);
        margin-right 10px;
      .r-body
        width: vw(250);
        display: flex;
        flex-wrap: wrap;
        .top
          font-size word14;
          color #333
          width 100%
        .des
          font-size word12;
          color #999
          width 100%
        .t-right
          display flex
          width 100%
          justify-content space-between
          color #333
          font-size word14
</style>
